import React, { useMemo } from 'react'
import style from './index.module.less'

function Main ({ data = [] }) {
  const list = useMemo(() => {
    const o = []
    for (let i = 0; i < data.length; i = i + 2) {
      const r = []
      if (data[i]) {
        r.push(data[i])
      }
      if (data[i + 1]) {
        r.push(data[i + 1])
      }
      o.push(r)
    }
    return o
  }, [data])
  return (
    <div className={style.container}>
      {
        list.map((li, i) => {
          return (
            <div className={style.line} key={i}>
              {
                li.map((o, j) => {
                  return (
                    <div className={style.item} key={`${i}-${j}`}>
                      <div className={style['item-title']}>{o.k}</div>
                      <div className={style['item-value']}>{o.v}</div>
                    </div>
                  )
                })
              }
            </div>
          )
        })
      }
    </div>
  )
}

export default Main
